<template>
	<view class="mine-container">
		<uni-card>
			<uni-list>
				<uni-list-item title="头像" link class="avatar-item" @click="chooseImg">
					<template #footer>
						<image :src="userStore.userInfo.headimgurl" class="avatar"></image>
					</template>
				</uni-list-item>
				<uni-list-item title="昵称" :rightText="userStore.userInfo.nickname"
					to="/pages/updateNickname/updateNickname" link="navigateTo" />
				<uni-list-item title="个人简介" rightText="一句话介绍我自己" link />
				<uni-list-item title="账号安全" rightText="待完善" link />
				<uni-list-item title="生日" rightText="待完善" link />
				<uni-list-item title="我的订单" link />
				<uni-list-item title="我的收货地址" link />
				<uni-list-item title="待收货" link />
				<uni-list-item title="待评价" link />
			</uni-list>
		</uni-card>
		<!-- <uni-card> -->
		<button type="default">切换账号</button>
		<button type="default" @click="quit">退出登入</button>
		<!-- </uni-card> -->
	</view>
</template>

<script setup>
	//引入store
	import useUser from "@/store/users.js"
	import { storeToRefs } from "pinia"
	import { updateUserApi } from "@/api/users.js"
	let userStore = useUser();

	//更换头像
	let chooseImg = () => {
		// console.log(123)
		uni.chooseImage({
			//裁切
			crop: {
				quality: 30,
				width: 100,
				height: 100
			},
			count: 1,
			success: (res) => {
				console.log(res)
				//获取文件的临时地址
				let filePath = res.tempFilePaths[0];
				console.log('filePath----', filePath)
				uni.showToast({
					title: '修改中',
					icon: 'loading'
				})
				//调用上传文件的api
				uni.uploadFile({
					url: `${import.meta.env.VITE_BASE_URL}/upload/uploadImg`, //开发者服务器
					name: "img", //开发者服务器要求传递的key,就是参数名
					filePath, //上传的文件路径
					success: async res => {
						// console.log('upload--', res)
						let data = JSON.parse(res.data)
						//调用修改用户头像的接口
						try {
							let updateRes = await updateUserApi({
								headimgurl: data.imgUrl,
								unid: userStore.userInfo.unid
							})
							// console.log('updateRes---', updateRes)
							// console.log('更新前---',userStore.userInfo)
							//直接修改pinia中userInfo的headimgurl,让本地头像更新
							userStore.userInfo.headimgurl = data.imgUrl;
							// console.log('修改之后---'.userStore.userInfo)
							//关闭加载动画
							uni.hideToast()
						} catch (e) {
							console.log(e)
						}
					},
					fail: (err) => {
						// console.log('uploadFail--', err);
						uni.hideToast();
						uni.showToast({
							title: err.toString(),
							icon: 'error'
						})
					}
				})
			},
			fail(err) {
				console.log(err)
			}
		})
	}

	//退出登入
	let quit = () => {
		//给个交互,让用户确认是否退出
		uni.showModal({
		
			cancelText: "取消",
			confirmText: "退出",
			title:"提示",
			content:'您是否要退出当前账号?',
			cancelColor: "#ff0000",
			success(res) {
				// console.log(confirm)
				if (res.confirm) {
					// 清空token
					uni.removeStorageSync('myx-token');
					//跳转到主页,触发之前我们编写的拦截业务逻辑,如果没有token会自动掉起登入/一键登入
					uni.reLaunch({
						url: "/pages/tabBar/home/home"
					})
				}
			}
		})


	}
</script>

<style scoped>
	.mine-container {
		height: 100vh;
		background-color: #f4f4f4;

	}

	.uni-card {
		border-radius: 15px;
		margin: 0 15px 15px !important;

	}

	:deep(.uni-list--border-bottom) {
		height: 0 !important;
	}

	:deep(.uni-list--border-top) {
		height: 0 !important;
	}

	/* :deep(uni-page) {
		background-color: #f4f4f4;
	} */

	.mine-container uni-button {
		width: 697.6rpx;
		background-color: #fff;
		margin-bottom: 15px;
	}

	.mine-container uni-button:nth-last-of-type(1) {
		color: #ccc;
	}

	.avatar {
		width: 8vh;
		height: 8vh;
		border: 1px solid #f0f0f0;
		border-radius: 50%;
	}

	.avatar-item :deep(uni-text) {
		line-height: 8vh;
	}

	/* 	.avatar-item :deep(.uni-list--border-top){
		border:none!important;
	} */
</style>